<template>
  <transition name="slide" appear>
    <musiclist  :title = "title" :bgImg = "bgImg" :songs = "songs"></musiclist>
  </transition>     
</template>
<script>
import Musiclist from 'components/music_list/musiclist.vue'
import {mapGetters} from "vuex"
import {getSongList} from "api/recommend.js"
import {createsong,processSongsUrl} from "commom/js/song.js"
export default {
  data(){
    return{
      songs:[]
    }
  },
  created(){
    this._getLyricList();
  },
  computed:{
    title(){
      return this.disc.dissname
    },
    bgImg(){
      return this.disc.imgurl
    },
    ...mapGetters([
      'disc'
    ]),
  },
  methods:{
    _getLyricList(){
      if(!this.disc.dissid){
        this.$router.push("/recomend");
        return;
      }
      getSongList(this.disc.dissid).then((res)=>{
        processSongsUrl(this._normalizeSongs(res.songlist)).then((songs) => {
          this.songs = songs
          console.log(this.songs);
        })
      })
    },
    _normalizeSongs(list){
      let ret = [];
      list.forEach((item,index)=>{
        if(item.pay.pay_play === 0){
          // console.log(item)
          let obj = {};
          obj.songid = item.id;
          obj.songmid = item.mid;
          obj.singer = item.singer;
          obj.albumname = item.album.title;
          obj.interval = item.interval;
          obj.albummid = item.album.mid;
          if(obj.songid && obj.albummid){
            ret.push(createsong(obj))
          }
        }
      })
      return ret;
    }
  },
  components:{
    Musiclist
  },
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .slide-enter,.slide-leave-to
    transform :translate3d(100%,0,0);
  .slide-enter-active,.slide-leave-active
    transition: all .3s;
</style>
